<template>
  <view class="container">
    <Table ref="table" :fetchData="fetchData" :autoFetch="true" class="table">
      <template #default="{ data }">
        <Card
          :stateColor="colors[item.taskState]"
          @click="cardClick(item)"
          v-for="item in data"
          :title="
            item.preventionCheckTaskConfig
              ? item.preventionCheckTaskConfig.deviceName
              : ''
          "
          :ff="formathour(item)"
          :fr="
            item.preventionCheckTaskConfig
              ? item.preventionCheckTaskConfig.analysisUnit
              : ''
          "
          :content="
            item.preventionCheckTaskConfig
              ? item.preventionCheckTaskConfig.hiddenContent
              : ''
          "
          :state="item.taskState"
        >
        </Card>
      </template>
    </Table>
    <button @click="saoyisao" type="primary" class="saoyisao">扫一扫</button>
  </view>
</template>
<script>
export default {
  // data() {
  //   return {
  //     row: {},
  //   };
  // },
  // onLoad(payload) {
  //   if (payload.row) {
  //     this.row = JSON.parse(decodeURIComponent(payload.row));
  //   }
  // },
};
</script>
<script setup>
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/yhpc/pcrw.js";
import { router } from "@/router/index.js";
import { PATH } from "../paths";
import Card from "@/components/Card.vue";
const colors = ref({
  待排查: "#e0c59f",
  已排查: "#8888ff",
  已超时: "#ff8888",
});
const parentNode = ref({});
const filterForm = reactive({
  // checkTaskConfigId: null,
});
const cardClick = (item) => {
  router.toPage({
    path: PATH.PCRWDETAIL,
    params: {
      row: JSON.stringify({ ...parentNode.value, ...item }),
      id: item.id,
    },
  });
};
const table = ref();
const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS,
  filterForm,
});

const formathour = (item) => {
  if (item.taskState == "已排查") {
    return "剩余:0";
  }
  const nowNum = Date.now();
  const times = new Date(item.endTime).getTime();

  let seconds = (times - nowNum) / 1000;
  let text = "剩余:";
  if (seconds > 0) {
    if (seconds >= 3600) {
      let hour = (seconds / 3600).toFixed(1);
      text += hour + "小时";
    } else {
      let hour = (seconds / 60).toFixed(1);
      text += hour + "分钟";
    }
  } else {
    text = "已超时";
  }
  return text;
};
onMounted(() => {
  // const { row } = getCurrentInstance().data;
  // parentNode.value = row;
  // queryParams.value.checkTaskConfigId = row.id;
  // filterForm.checkTaskConfigId = row.id;
  // getList();
});
onShow(() => {
  // const { row } = getCurrentInstance().data;
  // parentNode.value = row;
  // queryParams.value.checkTaskConfigId = row.id;
  // filterForm.checkTaskConfigId = row.id;
  // getList(true);
});
const saoyisao = () => {
  // router.toPage({
  //   path: "/pages/yhpc/pcjh/pcrwsm",
  //   params: {
  //      id: 20,
  //   },
  // });
  // return
  // 只允许通过相机扫码
  uni.scanCode({
    success: function (res) {
      let data = null;
      try {
        data = JSON.parse(res.result);
      } catch (e) {
        data = res.result;
      }
      if (data instanceof Object) {
        if (data.type == "双重预防") {
          router.toPage({
            path: "/pages/yhpc/pcjh/pcrwsm",
            params: {
              id: data.id,
            },
          });
        } else {
          uni.showToast({
            title: "未识别二维码",
          });
        }
      } else {
        router.toPage({
          path: "/pages/yhpc/pcjh/pcrwsm",
          params: {
            id: data.id,
          },
        });
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10upx 14upx;
}
.table {
  height: 88vh;
  overflow-y: auto;
}
.title {
  display: flex;
  justify-content: space-between;

  &-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  &-times {
    background-color: rgb(22, 119, 255);
    padding: 2px;
    font-size: 12px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 5px;
    color: #fff;
  }
}
.saoyisao {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 12vw;
  left: 0;
  right: 0;
}
</style>
